<template>
	<view class="banner">
		<swiper class="swiper" 
			circular 
			:indicator-dots="indicatorDots" 
			:autoplay="autoplay" 
			:interval="interval"
			:duration="duration">
			<swiper-item v-for="(bannerImg , index) in bannerList">
				<img :src="bannerImg.imgUrl" alt="">
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import banner from '@/assets/json/book/banner.json'
	export default {
		data() {
			return {
				bannerList: banner.banner,
				disableTouch: false, //是否禁止用户 touch 操作
				indicatorDots: true, //是否显示面板指示点
				autoplay: true, //是否自动切换
				vertical: false, //滑动方向是否为纵向
				interval: 5000, //自动切换时间间隔
				duration: 200, //滑动动画时长
				currentIndex: 0, //当前索引
			}
		},
		onLoad() {
	
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
	.banner{
		margin-top: 4vw;
		img{
			width: 92vw;
			height: 150px;
			border-radius: 10px;
		}
	}
</style>